<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.8.3.js"></script>
</head>
<body>

<div style="height: 100px;width: 100px;background-color: brown;position: absolute;"  id="targetDom"></div>



    <style>
        .move {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
        .move-header {
            width: 50px;
            height: 50px;
            background-color: rgb(255, 0, 170);
            cursor: pointer;
        }

    </style>
    <script>

        function get(id){
            return document.getElementById(id);
        }
        var mouseOffsetX = 0;
        var mouseOffsetY = 0;
        var isDrag = false;
        get("targetDom").addEventListener('mousedown',function(e){
            var e = e||window.event;
            //获取鼠标当前位置
            mouseOffsetX = e.pageX - get("targetDom").offsetLeft;
            mouseOffsetY = e.pageY - get("targetDom").offsetTop;
            isDrag = true;
        });
        $("#targetDom").on("mousedown",function(e){
            mouseOffsetX = $(document).scrollTop() - this.left;
            mouseOffsetY = $(document).scrollLeft() - this.top;
            isDrag = true;
        });
        document.onmousemove=function(e){
            var e = e||window.event;
            var moveX = 0;
            var moveY = 0;
            moveX = e.pageX - mouseOffsetX;
            moveY = e.pageY - mouseOffsetY;
            //获取元素位置并动态的改变位置
            
            if(isDrag){
                get("targetDom").style.left=moveX+"px";
                get("targetDom").style.top=moveY+"px";
                console.log(mouseOffsetX);
                console.log(mouseOffsetY);
            }
        }
        document.onmouseup=function(){
            isDrag = false;
        }


    </script>
</body>
</html>